HTML 标签

Posted on

HTML

HTML:超文本编辑语言（标签语言）

浏览器顺序渲染，从上到下，从左到右

是树型的

html格式
标签的属性是关键

meta标签 可提供有关页面的元信息

1
2
3
4
5
6
7
8
<meta charset="utf-8">
<meta name ="keywords" content="关键词">   <!--关键词用于搜索-->
<meta name="description" content="描述"> <!--网站的介绍-->
<meta http-equiv="retresh" content="3";http://www.baidu.com> <!--3秒跳转-->
<link rel="icon" herf ="https://www.">  <!--标签的图标-->

1
2
3
4
5
6
7
8
9
10
11
<body>
    <h1>
    <p> <!--段落-->
    <b>
    <strike>  <!--中间的横线-->
    <em> <!--斜体-->
    <sub><!--下角标-->
    <sup><!--上角标-->
	<br> <!--换行-->
    <hr><!--水平线-->
<body>

图片标签

1
<img src="" alt="">

a标签

1
id = ""  id是唯一的

标签分类：

  • 块级标签—独占一行
    • h1
    • p
    • div
  • 内联标签—根据内容而定
    • sub
    • sup
    • b
    • span

列表标签

  • 无序列表 unorder list

    1
    2
    3
    4
    5
    <ul>
       	<li>11111</li>
           <li>22222</li>
           <li>33333</li>
       </ul>

  • 有序列表ol

    1
    2
    3
    4
    5
    <ol>
       	<li>11111</li>
           <li>22222</li>
           <li>33333</li>
       </ol>

定义列表dl

1
2
3
4
<dl>
   	<dt>标题</dt>
	<dd>内容</dd>
   </dl>

table

1
2
3
4
5
<tr>
    <td rowspan="2" align="center"></td>
    <td ></td>
    <td ></td>
</tr>

制作的菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <style>
            table{
                height: 300px;
                width: 500px;
                border-color: #E788F7;
            }
        img{
            width: 100px;
        }
    </style>
</head>
<body>
    <table border="2px" cellpadding="0px" cellspacing="0px" align="center">
        <tr>  <!--第一列是标题内容-->
            <td colspan="3" align="center">星期一菜谱</td>
        </tr>
        <tr>
            <td rowspan="2" align="center">素菜</td>
            <td >青草茄子</td>
            <td >花椒扁豆</td>
        </tr>
        <tr>
            <td >小葱豆腐</td>
            <td >炒白菜</td>
        </tr>
        <tr>
            <td rowspan="2" align="center" >荤菜</td>
            <td >油焖大虾</td>
            <td >海参鱼翅</td>
        </tr>
        <tr>
            <td >红烧肉
                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494927422953&di=de12523759b4761d104db22ff0e23ccf&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F81280492%2Fr0364noa4xc_ori_3.jpg">
            </td>
            <td >烤全羊</td>
        </tr>
    </table>
</body>
</html>

制作的课程表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>classtable</title>
    <style>
          table{
                border-color: blue;
            }
    </style>
</head>
<body>
    <table border="1" cellspacing="1" align="center" >
        <tr>
            <td>项目</td>
            <td colspan="5" align="center">上课</td>
            <td colspan="2" align="center">休息</td>
        </tr>
        <tr>
            <td>星期</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="4" align="center">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>政治</td>
            <td>英语</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td rowspan="2" align="center">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="2" align="center">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
    </table>
</body>
</html>

© 2018 Peter's Blog Center All Rights Reserved.
Theme by hiero